<template>
	<view class="content" >
		<view class="banner_view" >
			<!-- <view class="page-section swiper" style="border-radius: 0px;">
				<view class="page-section-spacing" style="border-radius: 0px;" >
					<swiper class="swiper" style="border-radius: 0px;" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item style="border-radius: 0px;" >
							<image style="border-radius: 0px;"  src="https://static.cholink.com/recruit-staff/recruit-wx/banner1.png" mode=""></image>
						</swiper-item>
						<swiper-item style="border-radius: 0px;" >
							<image style="border-radius: 0px;"  src="https://static.cholink.com/recruit-staff/recruit-wx/banner2.png" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view> -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :dots-styles="dotsStyles" :circular="true"
			 :autoplay="true" :interval="interval" :duration="duration">
				<swiper-item >
					<image src="https://static.cholink.com/recruit-staff/recruit-wx/banner1.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item >
					<image src="https://static.cholink.com/recruit-staff/recruit-wx/banner2.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view id="scrollView" class="search-box"  v-bind:class="[isTop === 1? 'search-box-f':'']">
			<view class="mall_top_mask">
				<!-- 地址和搜索 -->
				<SearchBar @searchFun="searchFun" @openpop="openpopup" :address="address" />
			</view>
		</view> 
		<view class="type-box">
			<view class="t-type" v-for="(item,index) in type_data" @tap="to_D(index)">
				<image :src="item.url" mode=""></image>
				<view>{{item.label}}</view>
			</view>
		</view>
		<view class="screen-box" id="scrollView-s" v-bind:class="[isTop_s === 1? 'screen-box-f':'']">
			<view @tap="chooseScr(index)" class="screen-choose" :class="[sort_type===index?'isScr':'']" v-for="(item,index) in chooseData" :key="index">
				{{item.label}}
			</view>
			<view class="choose-add" @tap="openDrawer">筛选</view>
			<!-- 筛选操作栏 -->
			<!-- <HMfilterDropdown style="margin-left: auto;" :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirm" :updateMenuName="false" /> -->
		</view>
		<uni-drawer :visible="true" ref="drawer" width="280" mode="right">
		    <view style="padding:0px 24px;">
				<view class="d-title">
					岗位选择（多选）
				</view>
				<view class="job_box">
					<view class="job_data" :class="[item.isChoose? 'job_choose':'']" v-for="(item,index) in job_data" @tap="chooseJob(index)">
						{{item.job_name}}
					</view>
				</view>
				<view class="d-title" >
					薪酬范围（单选）
				</view>
				<view class="job_box">
					<view class="job_data" :class="[item.isChoose? 'job_choose':'']"  @tap="chooseSa(index)" v-for="(item,index) in salary_range" >
						{{item.label}}
					</view>
				</view>
				<view class="d-title" >
					基本福利（多选）
				</view>
				<view class="job_box">
					<view class="job_data" :class="[item.isChoose? 'job_choose':'']" v-for="(item,index) in JobTags"  @tap="chooseTag(index)">
						{{item.tag_name}}
					</view>
				</view>
		    </view>
			<view class="c_btn_box">
				<view class="release" :class="[isRe?'sure':'']" @tap="release">
					重置
				</view>
				<view class="sure" @tap="chooseAll">
					确定
				</view>
			</view>
		</uni-drawer>
		<view class="list-box">
			<view v-if="showList.length">
				<view  class="list" @tap="toDe(item)" v-for="(item,index) in showList" :key= "index">
					<block >
						<view class="title-box">
							<view class="tit-l">{{item.recruit_job_title}}</view>
							<view class="tit-r">{{item.recruit_job_name}}</view>
						</view>
						<view v-if="job_tab===0" class="money">{{item.salary_min}}-{{item.salary_max}}/月</view>
						<view v-else class="money">{{item.salary_min}}</view>
						<view class="flex flex-wrap">
							<view class="tag" v-for="(tag, index) in item.tag_data" :key="index">
								<view class="cu-tag light radius line-gray">
									{{ tag.tag_name || ''}}
								</view>
							</view>
						</view>
						<view class="address-box">
							<view class="address">
								{{item.city_address}}
							</view>
							<view v-show="item.city_address.lenth" class="line"></view>
							<view class="company">
								{{item.recruit_company_name}}
							</view>
						</view>
					</block>
				</view>
				<view class="">
					<uni-load-more @getLists ="updateList" :status="status"  :content-text="contentText" color="#07C160"  />
				</view>
			</view>
			<view v-else>
				<image src="../../static/img/poster/unstart.png" mode="" style="width: 200px;height: 200px;display: block;margin: 0 auto"></image>
				<view style="text-align: center;padding-top:16px;font-size: 16px;">抱歉，暂时还没有职位哦~</view>
			</view>
		</view>
		<uni-popup :show="false" type="right" ref="popup" :maskClick="false">
			<view class="content" style="background-color: #FFFFFF;">
				<t-city @changeAddress_name ="changeAddress_name"/>
			</view>
		</uni-popup>
	
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import TCity from '@/components/t-city.vue';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import SearchBar from "./components/SearchBar";
	import unidrawer from "@/components/uni-drawer/uni-drawer.vue";
	// import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import missionHallData from "@/common/missionHallData.js";
	import {job_lists,getphone,operatingrecord,jobSearch,getScreen} from "../../api/user.js"
	export default {
		components: {
			SearchBar,
			uniLoadMore,
			'uni-popup':uniPopup,
			// 'HMfilterDropdown': HMfilterDropdown,
			't-city':TCity,
			'uni-drawer':unidrawer
		},
		data() {
			return {
				job_data:[],
				JobTags:[],
				isTop:'',
				isTop_s:'',
				page:0,
				address:"常州",
				status: 'more',
				pageLists:[],
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},	
				isToken:false,
				jobLists:[],
				showList:[],
				resList:[],
				job_tab:0,
				phone_num:"",
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				ruleData: '',
				time: '',
				token:"",
				sort_type:1,
				is_within_scope: 0,
				filterDropdownValue: [],
				filterData: missionHallData,
				updateMenuName: false,
				dotsStyles: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
					selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
					bottom:100
				},
				chooseData:[
					{
						label:'推荐',
						value:0,
					},
					{
						label:'最新',
						value:1,
					}
				],
				myScroll:'',
				myScroll_s:'',
				salary_range:[{
					label:'不限',
					value:5,
					isChoose:false
				},{
					label:'1500元以下',
					value:0,
					isChoose:false
				},{
					label:'1500-3000元',
					value:1,
					isChoose:false
				},{
					label:'3000-5000元',
					value:2,
					isChoose:false
				},{
					label:'5000-8000元',
					value:3,
					isChoose:false
				},{
					label:'8000元以上',
					value:4,
					isChoose:false
				},
				],
				type_data:[{
					label:'拿推荐费',
					id:0,
					url:'../../static/img/index/tj.png'
				},
				{
					label:'日结工资',
					id:0,
					url:'../../static/img/index/rj.png'
				},
				{
					label:'周结工资',
					id:0,
					url:'../../static/img/index/zj.png'
				},
				{
					label:'小时工',
					id:0,
					url:'../../static/img/index/xs.png'
				}
				],
				isRe:false,
				screen_data:{
					jobs:[],
					salary_range:5,
					tags:[]
				}
			}
		},
		mounted() {
			
		},
		onPageScroll:function(e){
			if(e.scrollTop > this.myScroll+100){
				this.isTop = 1
			}else{
				this.isTop = 0
			}
			if(e.scrollTop > this.myScroll_s){
				this.isTop_s = 1
			}else{
				this.isTop_s = 0
			}
		},
		onLoad(){
			this.page = 0
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			const query = uni.createSelectorQuery().in(this);
			query.select('#scrollView').boundingClientRect(data => {
				console.log(data.top)
				this.myScrol = data.top
			}).exec();
			query.select('#scrollView-s').boundingClientRect(data => {
				this.myScroll_s = data.top
			}).exec();
			setTimeout(function() {
				console.log('start pulldown');
				}, 500);
				uni.startPullDownRefresh();		
		},
		// 下拉刷新
				onPullDownRefresh() {
					console.log('refresh');
					setTimeout(function() {
						uni.stopPullDownRefresh();
					}, 1000);
				},
				// 上拉加载
				onReachBottom() {
					this.pullUp()
				},
		onShow() {
			this.page = 0
			this.token = uni.getStorageSync('authorization')
			if (this.token) {
				this.isToken = true
				
			} else {
				this.isToken = false
			}
			// this.job_data = []
			// this.JobTags = []
			if(!this.job_data.length||!this.JobTags.length){
				// console.log(123456)
				getScreen().then(res=>{
					
					res.data.JobNames.forEach(item=>{
						
							this.job_data.push({
								job_name:item,
								isChoose:false
							})
						
					})
					res.data.JobTags.forEach(item=>{
						
							this.JobTags.push({
								tag_name:item,
								isChoose:false
							})
						
					})
				})
			}
			this.get_job_lists()
		},
		methods: {
			chooseScr(id){
				this.sort_type = id
				this.get_job_lists()
			},
			chooseAll(){
				// this.screen_data = {
				// 	jobs:[],
				// 	salary_range:5,
				// 	tags:[]
				// }
				this.job_data.forEach(item=>{
					if(item.isChoose){
						this.screen_data.jobs.push(item.job_name)
					}
				})
				this.salary_range.forEach(item=>{
					if(item.isChoose){
						this.screen_data.salary_range = item.value
					}
				})
				this.JobTags.forEach(item=>{
					if(item.isChoose){
						this.screen_data.tags.push(item.tag_name)
					}
				})
				console.log(this.job_data,22222,this.screen_data)
				uni.showLoading({
					title:'加载中',
				})
				job_lists({
					job_type:this.job_tab,
					tag_id:0,
					area:this.address,
					query_data:'',
					screen_data:this.screen_data,
					sort_type:this.sort_type,
					page:0,
					}).then(res=>{
						this.jobLists = res.data
						this.showList = this.jobLists
						uni.hideLoading()
				})
				this.$refs.drawer.close()
				this.page =0
			},
			to_D(id){
				uni.navigateTo({					url:'/pages/job_class/job_class?id='+id				})
			},
			release(){
				this.job_data.forEach((item,index)=>{
					item.isChoose = false
				})
				this.salary_range.forEach((item,index)=>{
					item.isChoose = false
				})
				this.JobTags.forEach((item,index)=>{
					item.isChoose = false
				})
				this.isRe = false
				this.screen_data = {
					jobs:[],
					salary_range:5,
					tags:[]
				}
				job_lists({
					job_type: Number(this.job_tab),
					tag_id: 0,
					area: this.address,
					query_data: '',
					screen_data: this.screen_data,
					sort_type: this.sort_type,
					page: 0
				}).then(res => {
					this.jobLists = res.data
					this.showList = this.jobLists
				})
				this.page =0
				this.$refs.drawer.close()
			},
			chooseJob(id){
				this.isRe = true
				this.job_data.forEach((item,index)=>{
					if(id === index){
						item.isChoose = !item.isChoose
						if(!item.isChoose){
							this.screen_data.jobs.pop(item.job_name)
						}
					}
				})
			},
			chooseSa(id){
				this.isRe = true
				this.salary_range.forEach((item,index)=>{
					if(id === index){
						item.isChoose = true
					}else{
						item.isChoose = false
					}
				})
			},
			chooseTag(id){
				this.isRe = true
				this.JobTags.forEach((item,index)=>{
					if(id === index){
						item.isChoose = !item.isChoose
						if(!item.isChoose){
							this.screen_data.tags.pop(item.tag_name)
						}
					}
				})
			},
			openDrawer(){
				this.$refs.drawer.open()
			},
			pullUp(){
				let _self = this
				_self.status = 'loading'
				uni.showNavigationBarLoading()
				
				console.log('reach');
				setTimeout(function() {
						_self.page += 1
						job_lists({
							job_type:Number(_self.job_tab),
							tag_id:0,
							area:_self.address,
							query_data:'',
							screen_data:_self.screen_data,
							sort_type:_self.sort_type,
							page:_self.page,
							}).then(res=>{
								if(res.data) {
									_self.status = 'more'
									res.data.forEach(item=>{
										_self.showList.push(item)
									})
								}else {
									return _self.status = 'noMore'
								}
						})
						
						
						// _self.showList=_self.showList.concat(_self.pageLists);
						
					// _self.status = 'more'
					uni.hideNavigationBarLoading()
					console.log(_self.status,444)
				}, 500);
			},
			updateList(){
				this.pullUp()
			},
			confirm(e){
				console.log(e.index)
				console.log(e.value)
			},
			getPhoneNumber(e){
				getphone({
					recruit_job_id:1,
					encrypted_data:e.detail.encryptedData,
					iv:e.detail.iv
				}).then(res=>{
					console.log(res)
				})
			},
			
			searchFun(search) {
				job_lists({
					job_type:this.job_tab,
					tag_id:0,
					area:this.address,
					query_data:search,
					screen_data:this.screen_data,
					sort_type:this.sort_type,
					page:0
					}).then(res=>{
						this.jobLists = res.data
						this.showList = this.jobLists
				})

			},
			changeAddress_name(res){
				this.address = res.cityName
				this.$refs.popup.close()
			},
			openpopup(){
				this.$refs.popup.open()
			},
			toDe(events){
				// console.log(events,8888)
				if(this.isToken){
					operatingrecord({
						operation_type:0,
						recruit_job_id:events.recruit_job_id
					}).then(res=>{
						console.log(res,6666)
					})
					var event = JSON.stringify(events)
					uni.navigateTo({
						url:'/pages/detail/detail?data='+event
					})
				}else{
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
			get_job_lists(){
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				if(this.isToken){
					job_lists({
						job_type:this.job_tab,
						tag_id:0,
						area:this.address,
						query_data:'',
						screen_data:this.screen_data,
						sort_type:this.sort_type,
						page:0
						}).then(res=>{
							this.jobLists = res.data
							this.showList = this.jobLists
							uni.hideLoading()
					})
				}else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			}
		}
	
	}
</script>

<style>
	.c_btn_box{
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}
	.banner_view{
		line-height: 150px;
	}
	.release{
		background: #CCCCCC;
		margin-right: 14px;
	}
	.sure{
		background: #0AC770;
	}
	.c_btn_box view{
		width: 109px;
		height: 44px;
		border-radius: 25px;
		font-size:17px;
		text-align: center;
		line-height: 44px;
		color: #FFFFFF;
	}
	.d-title{
		font-size: 14px;
		font-weight: bold;
		margin-top:15px;
	}
	.job_data {
		width: 104px;
		height: 30px;
		display: inline-block;
		border: 1px solid #E6E6E6;
		border-radius: 4px;
		line-height: 32px;
		text-align: center;
		margin-top: 14px;
	}
	.job_choose{
		background: #F2FCF8;
		border: 1px solid #07C160;
	}
	.job_box view:nth-child(2n){
		margin-left: 14px;
	}
	.choose-add{
		width: 62px;
		height: 28px;
		background: #F5F5F5;
		border-radius: 2px;
		text-align: center;
		margin-left: auto;
		margin-top: 12px;
		line-height: 28px;
	}
	.type-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 150px;
		border-bottom: 8px solid #F5F5F5; 
	}
	.t-type image{
		width: 62px;
		height: 62px;
	}
	.t-type view{
		text-align: center;
		align-items: center;
	}
	.screen-box{
		display: flex;
		padding: 0 16px;
		position: relative;
	}
	.screen-box-f{
		position: fixed;
		top:40px;
		background-color: #FFFFFF;
		z-index: 999;
		width: 100%;
	}
	.screen-choose{
		margin-right: 20px;
		line-height: 44px;
		height: 30px;
	}
	.isScr{
		border-bottom: 3px solid #07C160;
	}
	.content {
		
	}
	page {
		background-color: #FFFFFF;
		min-height: 1000px;
	}
	swiper {
		width: 100%;
		min-height: 160px !important;
		transform: translateY(0);
		overflow: hidden;
	}

	swiper-item {
		width: 100%;
		height: 140px;
		overflow: hidden;
	}

	swiper-item image {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.search-box{
		position: absolute;
		width: 100%;
		top: 140px;
	}
	.search-box-f{
		position: fixed;
		width: 100%;
		top: 0px;
		z-index: 999;
	}
	.head {}

	.mall_top_mask {
		/* background-color: #F2F2F2; */
		z-index: 2;
	}

	.type_box {
		background-color: #FFFFFF;
		padding-left: 16px;
		display: flex;
		padding: 14px 16px
	}

	.type_box view {
		width: 30px;
		height: 25px;
		/* border-radius: 12px; */
		text-align: center;
		font-weight: 400;
		font-size: 15px;
		color: #999999;
		line-height: 25px;
	}

	.type_box view:nth-child(2) {
		margin-left: 17px;
	}

	.type_box .is_active {
		/* background-color: #1089FF; */
		color: #1089FF;
	}

	.list-box {
		padding: 0 16px;
		margin-top: 20px;
		/* border-bottom: 1px solid #EEEEEE; */
	}
	.list-box .list {
		margin-bottom: 20px;
		border-bottom: 1px solid #EEEEEE;
	}

	.list-box view {
		margin-bottom: 5px;
	}

	.flex-wrap view {
		margin-right: 5px;
		font-size: 12px;
	}

	.tagstyle {
		height: 18px;
		border-radius: 4px;
		/* border:1px solid rgba(232,232,232,1); */
	}

	.cu-tag {
		background-color: #F5F5F5;
	}

	.cu-tag::after {
		border: none !important;
	}

	.title-box {
		display: flex;
	}

	.tit-l {
		width: 70%;
		color: #444444;
		font-size: 17px;
		font-weight: blod;
	}

	.tit-r {
		margin-left: auto;
		font-size: 15px;
		color: #999999;
	}

	.money {
		color: #07C160;
		font-size: 15px;
		font-weight: blod;
	}

	.address-box {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #999999;
	}

	.line {
		width: 2px;
		height: 10px;
		background-color: #DDDDDD;
		margin-left: 10px;
	}

	.company {
		margin-left: 10px;
		font-size: 13px;
		color: #999999;
	}
	.HMfilterDropdown  {
		top: 50px !important;
	}
	.wx-swiper-dots.wx-swiper-dots-horizontal {
	  bottom: 30px !important;
	}
</style>
